<template>
    <view class="index1_content">
        <view class="search-header">
            <view @click="handeleTo">
                <image style="width: 15rpx;height: 30rpx;" src="@/static/index2/index7.png" mode=""></image>
            </view>
            <view style="color: #FFFFFF;font-size: 32rpx;margin-right: 10rpx;">{{ $t('商品管理') }}</view>
            <view></view>
        </view>

        <!-- 出入库选择 -->
        <view class="entry-select">
            <view @click="handeleItem(index)"
                :class="index == indexID ? 'entry-select-item' : 'entry-select-item-active'"
                v-for="(item, index) in arr" :key="index">{{ $t(item) }} ({{ index == 0 ? up : down }}) </view>
        </view>
        <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Ys" refresher-enabled="true"
            :refresher-triggered="freshIsShow" @scrolltolower="lower" @refresherrefresh="fresh"
            @refresherrestore="store"
            refresher-background="background: linear-gradient(90deg, #5695FF -2%, #44D1D4 105%);">
            <view v-for="(item, index) in arrData" :key="index" class="u-margin-bottom-60">
                <!-- codeType 启用禁用状态 -->
                <view class="WarehouseCode-class">
                    <view class="WarehouseCode3">
                        <view class="u-font-24" style="color:#aaa;padding: 0 30rpx;">{{ $t('发布时间') }}：
                            {{ item.create_at }}
                        </view>
                        <view style="border-top: 1px dashed #D8D8D8;margin-top: 20rpx;"></view>
                        <view class="u-font-24 u-margin-top-24" style="color: #aaa;padding: 0 30rpx;">
                            {{ $t('商品图片') }}
                            <view class="u-flex u-margin-top-20 flex-top">
                                <image style="width: 250rpx;height: 250rpx;border-radius: 30rpx;"
                                    :src="IMAGE_URL + item.logo" mode="">
                                </image>
                                <view class="u-margin-left-20">
                                    <view>{{ $t('商品名称') }}</view>
                                    <view class="u-font-30 u-margin-top-10 u-margin-bottom-20" style="color: #333;">
                                        {{ item[$t('item.name')] }}</view>
                                    <view>{{ $t('货物类型') }}</view>
                                    <view class="u-font-30 u-margin-top-10" style="color: #333;">
                                        {{ changeGoodsType(item.goods_type) }}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="u-flex flex-both width-all u-font-24 u-margin-top-20" style="color: #aaa;padding: 0 30rpx;">
                            <view>
                                <view>{{ $t('起批数量') }}</view>
                                <view class="u-font-26 u-margin-top-10" style="color: #333;">
                                    {{ item.goods_num }}
                                    {{ item[$t('item.number_unit')] }}
                                </view>
                            </view>
                            <view>
                                <view>{{ $t('单件重量') }}</view>
                                <view class="u-font-26 u-margin-top-10" style="color: #333;">
                                    {{ item.goods_weight }}kg
                                </view>
                            </view>
                            <view>
                                <view>{{ $t('尺寸信息') }}</view>
                                <view class="u-font-26 u-margin-top-10" style="color: #333;">
                                    {{ item.goods_l }}*{{ item.goods_w }}*{{ item.goods_h }}m
                                </view>
                            </view>
                            <view>
                                <view>{{ $t('单件体积') }}</view>
                                <view class="u-font-26 u-margin-top-10" style="color: #333;">
                                    {{ item.goods_volume }}m³
                                </view>
                            </view>
                        </view>
                        <view class="money">
                            {{ $t('单价') }}: <view class="number">{{ item.desire_price }} <view class="unit">/{{ item[$t('item.price_unit')] }}</view>
                            </view>
                        </view>
                        <view class="WarehouseCode4">
                            <view class="WarehouseCode52" @click="handeleEdit(item)">{{ $t('编辑') }}</view>
                            <view class="WarehouseCode51" @click="handelRemove(item, index)" v-if="item.status == 1">
                                {{ $t('下架商品') }}</view>
                            <view class="WarehouseCode53" @click="handeleLocation(item, index)" v-else>{{ $t('发布商品') }}</view>
                        </view>
                    </view>
                </view>
            </view>

        </scroll-view>
        <view class="addCk">
            <view class="addCk-but" @click="handeleNew">{{ $t('新增商品') }}</view>
        </view>
        <!-- 顶部背景色 -->
        <image style="width: 750rpx;height: 690rpx;position: absolute;top: 0;z-index: 1;"
            src="@/static/index2/20241101130857.png" mode=""></image>
    </view>
</template>

<script>
import {
    IMAGE_URL
} from '@/config/app';
export default {
    data () {
        return {
            IMAGE_URL,
            arr: ['线上商品', '线下商品'],
            indexID: 0,
            scrollTop: 0, //高度
            freshIsShow: true, //下拉加载
            page: 1, //页数
            total: 0, //总条数
            arrData: [], //数据
            down: 0, //下架
            up: 0, //上架
        };
    },
    mounted () {    
        this.getData()
        this.getGoodsCount()
    },
    methods: {
        //编辑商品 跳转到新增页面并且将id传过去
        handeleEdit(item){
            uni.navigateTo({
                url: '/pages/tabbar/order/gongyingshang/addGoods?id=' + item.id
            })
        },
        // 获取商品总数
        getGoodsCount () {
            this.$u.api.transport.getGoodsCount({
                status: 3
            }).then(res => {
                this.total = res.total
                this.down = res.down
                this.up = res.up
            })
        },
        changeGoodsType (type) {
            if (type == 1) {
                return this.$t('中国货物')
            } else if (type == 2) {
                return this.$t('俄罗斯货物')
            } else if (type == 3) {
                return this.$t('在俄中国货物')
            } else if (type == 4) {
                return this.$t('在中俄罗斯货物')
            }
        },
        handeleItem (index) {
            this.indexID = index;
            this.page = 1
            this.arrData = [];
            this.getData();
        },
        //上架商品
        handeleLocation(item, index){
            //确认上架
            uni.showModal({
                title: this.$t('提示'),
                content: this.$t('确认发布该商品吗？'),
                success: (res) => {
                    if (res.confirm) {
                        this.$u.api.transport.quickRelease({
                            id: item.id
                        }).then(res => {
                            uni.showToast({
                                title: this.$t('发布成功'),
                                icon: 'success'
                            })
                            this.page = 1
                            this.arrData = [];
                            this.getData();
                            this.getGoodsCount();
                        })

                    }
                }
            })
        },
        //下架商品
        handelRemove (item, index) {
            // 确认下架
            uni.showModal({
                title: this.$t('提示'),
                content: this.$t('确认下架该商品吗？'),
                success: (res) => {
                    if (res.confirm) {
                        this.$u.api.transport.removeGoods({
                            id: item.id
                        }).then(res => {
                            uni.showToast({
                                title: this.$t('下架成功'),
                                icon: 'success'
                            })
                            this.page = 1
                            this.arrData = [];
                            this.getData();
                            this.getGoodsCount();
                        })
                    }
                }
            });
        },
        // 获取数据
        getData () {
            var that = this
            this.$u.api.transport.getGoodsList({
                page: this.page,
                limit: 10,
                //全部 1已发布 2未发布
                status: this.indexID == 0 ? 1 : 2
            }).then(res => {
                if (res.length > 0) {
                    that.arrData = [...that.arrData, ...res];
                    that.page++;
                }
                that.freshIsShow = false
            })
        },
        // 新增
        handeleNew () {
            uni.navigateTo({
                url: '/pages/tabbar/order/gongyingshang/addGoods'
            })
        },
        // 返回上一页
        handeleTo () {
            uni.navigateBack()
        },
        // 下拉刷新复位
        store () {
            this.freshIsShow = false
        },
        // 下拉刷新触发
        fresh () {
            this.page = 1
            this.arrData = [];
            this.freshIsShow = true
            this.getData()
        },
        // 触底加载
        lower () {
            // 触底判断总条数不等于当前数据的条数则获取数据
            if (this.total != this.arr.length) {
                this.getData()

            }
        },
    }
}
</script>

<style lang="less" scoped>
.money {
    color: #FF0000;
    font-size: 26rpx;
    margin-top: 20rpx;
    padding: 0 30rpx;

    .number {
        font-size: 40rpx;
        padding-left: 20rpx;
        display: inline;
        font-weight: 600;

        .unit {
            font-size: 26rpx;
            display: inline;
            font-weight: normal;
        }
    }
}

page {
    width: 100%;
    height: 100%;
    background-color: #F1F2F4;
}

.WarehouseCode9 {
    width: 196rpx;
    height: 60rpx;
    border-radius: 60rpx;
    text-align: center;
    line-height: 60rpx;
    background: #FF5D5D;
    color: #FFFFFF;
    margin-right: 21rpx;
}

.WarehouseCode10 {
    width: 196rpx;
    height: 60rpx;
    border-radius: 60rpx;
    text-align: center;
    line-height: 60rpx;
    background: #5282E6;
    color: #FFFFFF;
}

.WarehouseCode8 {
    margin-top: 20rpx;
    width: 100%;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 30rpx;

}

.WarehouseCode7 {
    padding: 30rpx 0;
    z-index: 2;
    width: 690rpx;
    min-height: 222rpx;
    border-radius: 32rpx;
    background: #FFFFFF;
    margin-bottom: 24rpx;
}

.WarehouseCode51 {
    width: 48%;
    height: 60rpx;
    border-radius: 60rpx;
    background: #FF5D5D;
    color: #FFFFFF;
    font-size: 22rpx;
    text-align: center;
    line-height: 60rpx;
}

.WarehouseCode52 {
    width: 48%;
    height: 60rpx;
    border-radius: 60rpx;
    background: #5282E6;
    color: #FFFFFF;
    font-size: 22rpx;
    text-align: center;
    line-height: 60rpx;
}

.WarehouseCode53 {
    width: 48%;
    height: 60rpx;
    border-radius: 60rpx;
    background: #06C36E;
    color: #FFFFFF;
    font-size: 22rpx;
    text-align: center;
    line-height: 60rpx;
}

.WarehouseCode4 {
    width: 100%;
    height: 60rpx;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: -30rpx;
}

.WarehouseCode3 {
    width: 100%;
    min-height: 286rpx;
    border-radius: 32rpx;
    background: #FFFFFF;
    padding: 22rpx 0rpx 20rpx 0rpx;
    padding-bottom: 60rpx;
}



.scroll-Ys {
    margin-top: 24rpx;
    z-index: 2;
    width: 690rpx;
    height: calc(100vh - 380rpx);
}

.addCk-but {
    width: 540rpx;
    height: 90rpx;
    border-radius: 90rpx;
    background: linear-gradient(180deg, #30F998 0%, #0D7DE2 98%);
    color: #FFFFFF;
    font-size: 28rpx;
    text-align: center;
    line-height: 90rpx;
}

.addCk {
    width: 100%;
    height: 110rpx;
    background-color: #F1F2F4;
    display: flex;
    align-items: center;
    justify-content: center;
}


.WarehouseCode-class {
    margin-bottom: 30rpx;
    z-index: 2;
    width: 690rpx;
    border-radius: 32rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    // padding-bottom: 60rpx;
}

.search-header {
    z-index: 2;
    width: 690rpx;
    height: 133rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40rpx;
}

.index1_content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* height: 100vh; */
}

.entry-select-item {
    width: 315rpx;
    height: 60rpx;
    border-radius: 60rpx;
    background: #5282E6;
    font-size: 24rpx;
    color: #FFFFFF;
    text-align: center;
    line-height: 60rpx;
    background: linear-gradient(180deg, #30F998 0%, #0D7DE2 98%), #5282E6;

    box-shadow: 0px 3.97px 9.92px 0px rgba(0, 76, 255, 0.3);
}

.entry-select-item-active {
    width: 315rpx;
    height: 60rpx;
    border-radius: 60rpx;
    font-size: 24rpx;
    color: #000000;
    text-align: center;
    line-height: 60rpx;
}

.entry-select {
    z-index: 2;
    width: 690rpx;
    height: 80rpx;
    border-radius: 80rpx;
    background: #FFFFFF;
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>